<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name = "viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/demo-enter.css" />
	</head>
	<body>
		<div class="global">
			<header>
				<div class="icon-big">
				</div>
			</header>
			<section>
				<div class="input pubIn-big">
					<input type="text" name="input" class="pubIn" placeholder="QQ号码/手机/邮箱" maxlength='11'/>
					<div class="focus-none">
						<i class="icon" style="display:none;"></i>
					</div>
				</div>
				<div class="key pubIn-big">
					<input type="password" name="key" class="pubIn" placeholder="请输入您的QQ密码" maxlength='16'/>
					<div class="focus-none">
						<i class="icon" style="display:none;"></i>
					</div>
				</div>
				<div class ="go com-go">登 录</div>
				<div class ="go quick-go">一键登录</div>
			</section>
			<footer>
				<div class="pub forget">忘了密码?</div>
				<div class="pub rigister">注册新账号</div>
			</footer>
		</div>
		<script>
			(function(){
				function setRem(){
		            document.documentElement.style.fontSize = window.innerWidth / 20 + "px";
		            }
		            window.onresize = function(){
		                setRem();
		            };
		         
		        function inputNone(){
		        	var input = document.querySelectorAll("input");
					var focus = document.querySelectorAll("i.icon");
		        	var inputAdd = function(i){
		        			input[i].addEventListener('keyup',function(){
				        		if(this.value != ""){
				        			focus[i].style.display = "block";
				        		}else{
				        			focus[i].style.display = "none";
				        		}
		        			});
		        		};
		        	var ITouchEnd = function(){
		        			for(var i = 0;i < input.length;i++ ){
		        				focus[i].addEventListener("touchend",function(){
		        					this.parentNode.previousElementSibling.value = "";
		        					
		        					this.style.display = "none";
		        				});
		        			}
		        			
		       			}

						ITouchEnd();
		        		inputAdd(0);
		        		inputAdd(1);
		        	}

		        setRem();
		        inputNone();
	    	})();
	        (function(){
		        function ajax(option){
					function queryString(object){
						var result = [];
						for(var i in object){
							result.push(i + "=" + object[i] + "&");
						}
						return result.join("").replace(/&$/, "");
					}
					var xhr = new XMLHttpRequest(),
						type = option.type,
						data = queryString(option.data);
					xhr.open(type || "get", option.url + (data && type === "get" ? "?" + data : ""), option.asnyc || 1);
					data && type === "post" && xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
					xhr.onreadystatechange = function(){
						if(xhr.readyState === 4){
							var responseText = option.dataType && option.dataType === "text" ? xhr.responseText : JSON.parse(xhr.responseText);
							if(xhr.status === 200){
								typeof option.success === "function" && option.success(responseText);
							}else{
								typeof option.error === "function" && option.error(responseText);
							}
						}
					};
					xhr.send(data || null);
				}
				function submit(){
					var section = document.querySelector("section");
					var submit = section.querySelector(".com-go");
					var inputUse = section.querySelector("input[name=\"input\"]");console.log(inputUse);
					var inputKey = section.querySelector("input[name=\"key\"]");
					submit.addEventListener("touchend",function(){
						ajax({
							url:"http://www.ikindness.cn/api/test/message",
							type:"get",
							data:{
								tel:inputUse.value
							},
							success:function(data){
								if (inputKey.value == data.data) {
									window.open("demo.html");
								}else{
									alert("登录失败");
								}
							}
						});
					});	
				}
				submit();
	        })();
		</script>
	</body>
</html>